<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <%--    添加业主--%>
    <meta charset="utf-8">
    <title>公告管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">

    <style>
        .notice-btn {
            display: flex;
            justify-content: space-between;
        }

        /*添加页面*/
        #selectBox {
            display: flex;
        }

        #leavingMsgDetail {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #leavingMsgDetailMain {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);
            z-index: 9999;

        }

        #addHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #3f410b;

        }

        #addMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        .layui-upload-list {
            display: block;
            margin: 10px 0;
            width: 102px;
            height: 102px;
            border: black 1px solid;
        }

        #demo1 {
            display: block;
            width: 102px;
            height: 102px;
        }

        img {
            width: 50px;
            height: 50px;
        }

        #parent {
            display: flex;
            width: 100%;
        }

        #headImg {
            border-radius: 50%
        }

        #userNickname {
            margin-bottom: 10px;
        }

        #info {
            margin: 5px;
            width: 100px;
        }

        #leavingMsgCount {
            /*border: solid 1px #ebb158;*/
            margin: 10px  0 10px 55px ;
        }

        #leavingMsgCount>img {
            /*border: solid 1px #ebb158;*/
            width: 28px;
            height: 28px;
        }

        /**/

    </style>


</head>
<body>

<table class="layui-hide" id="noticeList" lay-filter="noticeList"></table>


<%--<div id="addMainBox">--%>
<%--    <div id="addHiddenBox">--%>
<%--        <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->--%>
<%--            <input type="text" name="reviews" style="display: none" id="content" class="layui-input">--%>
<%--            <input type="text" name="userId" style="display: none" id="userId" class="layui-input"--%>
<%--                   value="${applicationScope.user.id}">--%>
<%--            <input type="text" name="parentId" style="display: none" id="parentId" class="layui-input" value="0">--%>
<%--            <div class="layui-form-item layui-form-text">--%>
<%--                &lt;%&ndash;                <label class="layui-form-label">公告</label>&ndash;%&gt;--%>
<%--                <div class="layui-input-block">--%>
<%--                    <div id="wangEditor">--%>
<%--                        &lt;%&ndash;                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>&ndash;%&gt;--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            &lt;%&ndash;                        <button type="button" id="btn">获取内容</button>&ndash;%&gt;--%>
<%--            <div class="layui-form-item">--%>
<%--                <div class="layui-input-block">--%>
<%--                    <button type="button" class="layui-btn" lay-submit lay-filter="noticeBtn">发布</button>--%>
<%--                    <button type="button" class="layui-btn layui-btn-primary" id="addReturnWindows">返回</button>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--            &lt;%&ndash;            <a href="${pageContext.request.contextPath}/notice/viewNotice?id=1" style="width: 100%;height: 100px">i安吉</a>&ndash;%&gt;--%>
<%--        </form>--%>
<%--    </div>--%>
<%--</div>--%>

<%--<a href="/notice/viewNotice?id=7" class="notice-btn" style="width: 100%"> <div><p>ddksfhasdfalsasdhfl;aksd;fla;sdfj;asdddksfhasdfalsasdhfl;aksd;fla;sdfj;asd</p><p>ddksfhasdfalsasdhfl;aksd;fla;sdfj;asd<br></p><p>ddksfhasdfalsasdhfl;aksd;fla;sdfj;asd<br></p><p>ddksfhasdfalsasdhfl;aksd;fla;sdfj;asd<img src="http://localhost:8888/9fe26d32-1ce0-45af-8540-cfb5ddf86fe6.jpg" style="max-width: 100%;"><br></p></div><span style="line-height: 200%">2021-04-04</span></a>--%>

<div id="leavingMsgDetailMain">
    <div id="leavingMsgDetail">
        <div id="parent">
            <img id="headImg" src="">
            <div id="info">
                <div id="userNickname"></div>
                <div id="createTime"></div>
            </div>
        </div>
        <div style="background-color: #828282;"></div>
        <div id="leavingMsgCount"></div>
        <table class="layui-hide" id="sonLeavingMessage" lay-filter="sonLeavingMessage"></table>
        <button type="button" id="closeLeavingMsgDetailMain" class="layui-btn layui-btn-fluid">返回</button>
    </div>
</div>


<%--按钮样式展示--%>
<%--<button type="button" class="layui-btn layui-btn-fluid notice-btn" style="width: 100%">--%>
<%--    <span style="line-height: 200%">2020-2-1</span>--%>
<%--</button>--%>
<script type="text/html" id="test-table-operate-barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
    <%--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑用户</a>--%>
    <%--    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除留言</a>--%>
</script>


<script type="text/html" id="leavingMsgTool">
<%--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>--%>
    <%--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑用户</a>--%>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除留言</a>
</script>

<script src="${pageContext.request.contextPath}/wangEditor/js/wangEditor.min1.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            laydate = layui.laydate
            , upload = layui.upload
        var E = window.wangEditor
        var editor = new E("#wangEditor")
        // 或者 const editor = new E(document.getElementById('div1'))


        // 配置 server 接口地址
        editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';

        editor.config.uploadFileName = 'file';

        var IMG_URL_PATH = '${pageContext.request.contextPath}';


        // 默认情况下，显示所有菜单
        editor.config.menus = [
            'head',
            'bold',
            // 'fontSize',
            // 'fontName',
            'italic',
            'underline',
            'strikeThrough',
            // 'indent',
            // 'lineHeight',
            // 'foreColor',
            // 'backColor',
            // 'link',
            // 'list',
            // 'todo',
            // 'justify',
            // 'quote',
            'emoticon',
            'image',
            // 'video',
            // 'table',
            // 'code',
            // 'splitLine',
            // 'undo',
            // 'redo',
        ]

        editor.config.uploadImgHooks = {
            // 上传图片之前
            // before: function(xhr) {
            //     console.log(xhr)
            //
            //     // 可阻止图片上传
            //     return {
            //         prevent: true,
            //         msg: '需要提示给用户的错误信息'
            //     }
            // },
            // 图片上传并返回了结果，图片插入已成功
            success: function (xhr) {
                // console.log('success', xhr);
                $("#content").val(editor.txt.html());
                // console.log(editor.txt.html());
            },
            // // 图片上传并返回了结果，但图片插入时出错了
            // fail: function(xhr, editor, resData) {
            //     console.log('fail', resData)
            // },
            // // 上传图片出错，一般为 http 请求的错误
            // error: function(xhr, editor, resData) {
            //     console.log('error', xhr, resData)
            // },
            // // 上传图片超时
            // timeout: function(xhr) {
            //     console.log('timeout')
            // },
            // // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            // customInsert: function(insertImgFn, result) {
            //     // result 即服务端返回的接口
            //     console.log('customInsert', result)
            //
            //     // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            //     insertImgFn(result.data[0])
            // }
        }

        editor.config.emotions = [
            <%--{--%>
            <%--    title: '新浪', // tab 的标题--%>
            <%--    type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式--%>
            <%--    content: [--%>
            <%--        { alt: '[坏笑]', src: '${IMG_URL_PATH}/50/pcmoren_huaixiao_org.png' },--%>
            <%--        { alt: '[舔屏]', src: '${IMG_URL_PATH}/40/pcmoren_tian_org.png' },--%>
            <%--        { alt: '[污]', src: '${IMG_URL_PATH}/3c/pcmoren_wu_org.png' },--%>
            <%--        { alt: '[污]', src: '${IMG_URL_PATH}/img/apartment.png' },--%>
            <%--    ]--%>
            <%--},--%>
            {
                title: 'emoji',  // tab 的标题
                type: 'emoji', // 'emoji' / 'image'
                // emoji 表情，content 是一个数组即可
                content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐 😻 😼 🎈 🍕 🚃 ❤'.split(/\s/),
            }
            // ,
            // {
            //     title: '表情',  // tab 的标题
            //     type: 'emoji', // 'emoji' / 'image'
            //     // emoji 表情，content 是一个数组即可
            //     content: '😚 😐 😶 😏 😻 😼 🎈 🍕 🚃 ❤'.split(/\s/),
            // }
        ]

        editor.create();

        $("#btn").click(function () {
            var html = editor.txt.html();
            console.log(html)
        })

        // 打印富文本内容
        // $(".notice-btn").click(function (d) {
        //     console.log(1);
        //     console.log(d);
        // })

        // function template(d){
        //     var html = '';
        //     html += '<button ';
        //     html += 'data-num=';
        //     html += d.id;
        //     html += ' type="button" ';
        //     html += ' class="layui-btn layui-btn-fluid notice-btn" style="width: 100%"> ';
        //     html += '<span style="line-height: 200%">';
        //     html += d.title;
        //     html += '</span>';
        //     html += '<span style="line-height: 200%">';
        //     html += d.createTime;
        //     html += '</span>';
        //     html += '</button>';
        //     return html;
        //
        // }
        <%--<a href="${pageContext.request.contextPath}/notice/viewNotice?id=1">i安吉</a>--%>

        function template(d) {
            var html = '';
            <%--html += '<a ';--%>
            <%--html += 'href=';--%>
            <%--html += '${pageContext.request.contextPath}/notice/viewNotice?id=';--%>
            <%--html += d.id;--%>
            <%--html += '>';--%>
            // html += ' class="notice-btn" style="width: 100%"> ';
            // html += '<div style="width: 100px;height: 50px">';
            html += d.reviews;
            // html += '</div>';
            // html += '<span style="line-height: 200%">';
            html += d.createTime;
            // html += '</span>';
            // html += '</a>';
            return html;

        }


        function noticeRefresh() {
            notice.reload();
        }

        /*关闭添加页面*/
        $("#addReturnWindows").click(function addReturnWindows() {
            $("#addMainBox").css("display", "none");
            $("#addHiddenBox").css("display", "none");
        });

        //第一个实例
        var notice = table.render({
            elem: '#noticeList'
            // ,height: 312
            , url: '${pageContext.request.contextPath}/leavingMsg/leavingMsgList' //数据接口
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
            , toolbar: 'default'
            , page: true
            , limits: [10]
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left', style: "height: 80px;line-height: 80px"},
                // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                {field: 'reviews', title: '留言 ', style: "height: 80px;line-height: 80px"},
                // {field: 'reviews', title: '留言 ',width: 1143,style: "height: 80px;line-height: 80px"},
                {
                    field: 'createTime',
                    width: 140,
                    title: '发布时间 ',
                    align: "right",
                    style: "height: 80px;line-height: 80px",
                    sort: true
                }
                // {field: 'createTime', title: '发布时间 ',align: "right",width: 104,style: "height: 80px;line-height: 80px",sort :true}
                // ,{field: 'content', title: '性别', width:80, sort: true}
                // ,{field: 'contentPicturePath', title: '城市', width:80}
                // ,{createTime: 'createTime', title: '签名', width: 177}
                // ,{updateTime: 'updateTime', title: '积分', width: 80, sort: true}
                , {width: 100, align: 'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
        });


        function userImg(data) {
            // console.log(data);
            var html = '';
            html += '<img src="';
            html += data.imgInfo;
            html += '"'
            html += ' class = "userImgPath" style="border-radius: 50%; width: 28px; height: 28px"';
            html += '/>';
            return html;
        }

        var leavingMsg = table.render({
            elem: '#sonLeavingMessage'
            // ,height: 312
            , url: '${pageContext.request.contextPath}/leavingMsg/getRecordByAreaCode' //数据接口
            // , request: {
            //     pageName: 'pageNum',
            //     limitName: 'pageSize'
            // }
            // , toolbar: 'default'
            // , page: true
            // , limits: [10]
            , cols: [[ //表头
                // {type: 'checkbox', fixed: 'left', style: "height: 80px;line-height: 80px"},
                // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                {field: 'imgInfo', title: '',width: 80, style: "height: 80px;line-height: 80px",templet: function (data) {
                        return userImg(data);
                    }},
                {field: 'leavingInfo', title: '',width: 170, style: "height: 80px;line-height: 80px"},
                {field: 'reviews', title: '留言', style: "height: 80px;line-height: 80px"},
                {field: 'createTime',width: 140, title: '时间', style: "height: 80px;line-height: 80px"}
                , {width: 100, align: 'center', fixed: 'right', toolbar: '#leavingMsgTool'}
            ]]
        });

        form.on('submit(noticeBtn)', function (data) {
            var data = data.field
            data.reviews = editor.txt.html()
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            $.ajax({
                url: "${pageContext.request.contextPath}/leavingMsg/insertLeavingMsg",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    console.log("success");
                    console.log(res);
                    if (res.code == 0) {
                        location.href = "${pageContext.request.contextPath}/leavingMsg/leavingMsg";
                    } else {
                        layer.msg(res.msg);
                    }
                    // userListTable.reload();
                    return;
                }
            })

        });


        //头部工具栏监听事件
        table.on('toolbar(noticeList)', function (obj) {
            // console.log("**********************")
            // console.log(obj);
            // console.log("**********************")
            // var checkStatus = table.checkStatus(obj.config.id);
            // console.log(checkStatus);
            var checkStatus = table.checkStatus('noticeList');
            var checkedData = checkStatus.data
            console.log(checkStatus)
            switch (obj.event) {
                case 'add':
                    console.log(obj);
                    // layer.msg('添加');
                    /*打开添加页面*/
                    $("#addMainBox").css("display", "block");
                    $("#addMainBox").css("z-index", "9999999");
                    $("#addHiddenBox").css("display", "block");
                    break;
                case 'delete':
                    // layer.msg('删除');
                    if (checkedData.length < 1) {
                        layer.msg("请选择数据后在操作");
                        return;
                    }
                    var ids = '';
                    var id = "";
                    for (var i = 0; i < checkedData.length; i++) {
                        var notice = checkedData[i];
                        ids += notice.id;
                        ids += ',';
                    }

                    id = ids.substring(0, ids.length - 1)

                    layer.confirm('真的要删除么', function (index) {
                        if (index > 0) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/leavingMsg/deleteLeavingMsg?id=" + id,
                                type: "get",
                                success: function (res) {
                                    console.log("success");
                                    console.log(res);
                                    if (res.code == 0) {
                                        location.href = "${pageContext.request.contextPath}/leavingMsg/leavingMsg";
                                    } else {
                                        layer.msg(res.msg);
                                    }
                                    // userListTable.reload();
                                    return;
                                }
                            })
                            layer.close(index);
                        }
                    })
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            }
            ;
        });

        //监听工具条
        table.on('tool(noticeList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                console.log(data);
                $("#leavingMsgDetailMain").css("display","block");
                $("#leavingMsgDetail").css("display","block");
                $.ajax({
                    url: "${pageContext.request.contextPath}/system/getUserById?id=" + data.userId,
                    type: "get",
                    // data: JSON.stringify(id),
                    // contentType: 'application/json',
                    // processDate: false,
                    success: function (res) {
                        $("#headImg").attr("src", res.imgPath);
                        $("#userNickname").append(res.userNickname);
                        $("#createTime").append(res.createTime);
                        $("#leavingMsgCount").append(data.reviews);
                    }
                })
                table.reload('sonLeavingMessage',{
                    where: { //设定异步数据接口的额外参数，任意设
                        areaCode: data.areaCode,
                    }
                })


            }
            // else if (obj.event === 'del') {
            //     layer.confirm('真的要删除么', function (index) {
            //         console.log(data);
            <%--var id = data.id;--%>
            <%--if (index > 0) {--%>
            <%--    $.ajax({--%>
            <%--        url: "${pageContext.request.contextPath}/user/deleteUser",--%>
            <%--        type: "post",--%>
            <%--        data: JSON.stringify(id),--%>
            <%--        contentType: 'application/json',--%>
            <%--        processDate: false,--%>
            <%--        success: function (res) {--%>
            <%--            // console.log(res);--%>
            <%--            userListTable.reload();--%>
            <%--            // return;--%>
            <%--        }--%>
            <%--    })--%>
            <%--    layer.close(index);--%>
            <%--    return;--%>
            <%--}--%>
            <%--layer.msg("删除失败")--%>
            //         });
            //     } else if (obj.event === 'edit') {
            //         layer.alert('编辑行：<br>' + JSON.stringify(data))
            //
            //     }
        });

        $("#closeLeavingMsgDetailMain").click(function () {
            closeLeavingMsgDetailMain();
        })

        function closeLeavingMsgDetailMain(){
            $("#leavingMsgDetailMain").css("display","none");
            $("#leavingMsgDetail").css("display","none");
            $("#userNickname").empty();
            $("#createTime").empty();
            $("#leavingMsgCount").empty();
        }

        //监听表格复选框选择
        table.on('checkbox(test-table-operate)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(sonLeavingMessage)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                // // layer.msg('ID：'+ data.id + ' 的查看操作');
                // layer.open({
                //     type: 1,
                //     content: $('#getLeavingMsg') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                // });
            } else if(obj.event === 'del'){
                console.log("=====================")
                console.log(data)
                console.log("=====================")
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: "${pageContext.request.contextPath}/leavingMsg/deleteLeavingMsg",
                        type: "post",
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        processDate: false,
                        success: function (res) {
                            table.reload('sonLeavingMessage',{

                            })
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function () { //获取选中数据
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , getCheckLength: function () { //获取选中数目
                var checkStatus = table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.msg('选中了：' + data.length + ' 个');
            }
            , isAll: function () { //验证是否全选
                var checkStatus = table.checkStatus('test-table-operate');
                layer.msg(checkStatus.isAll ? '全选' : '未全选')
            }
        };

        $('.test-table-operate-btn .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
</body>
</html>
